<script setup lang="ts">
import { Refresh, Top, Warning, Bottom } from '@element-plus/icons-vue'
import liqiud from './components/liqiueds.vue'
import kd from '/src/assets/img/kd.png'
import ys from '/src/assets/img/ys.png'
import lx from '/src/assets/img/lx.png'
import cl from '/src/assets/img/cl.png'
import sj from '/src/assets/img/sj.png'
import yf from '/src/assets/img/yf.png'
import maps from './components/map.vue'
import table1 from './components/table.vue'
import tu from './components/tu.vue'
import fenbu from './components/fenbeu.vue'
import { getWorkPaceApi } from '@/api/home'
import { onMounted, reactive, ref } from 'vue-demi'
import { IhomeData, monthlyOrderList } from '@/types/data'
const loading = ref<boolean>(true)
// import splitThousandSeparator from '@/utils/money'
// 首页数据
let orderAmount = ref<number>(0)
let orderNumber = ref<number>(0)
let transportTaskNumber = ref<number>(0)
let orderMaxNumber = ref<number>(0)
let orderAverageNumber = ref<number>(0)
let orderMinNumber = ref<number>(0)
let workPace = ref<IhomeData>()
const getWorkPace = async (): Promise<void> => {
  const res = await getWorkPaceApi()
  workPace.value = res.data.data
  loading.value = false
  // 动态数字 订单金额
  var Timer = setInterval((): void => {
    orderAmount.value += 100
    if (Number(workPace.value?.todayData.orderAmount) - orderAmount.value <= 100) {
      orderAmount.value += (Number(workPace.value?.todayData.orderAmount) - orderAmount.value)
      // clearInterval(orderAmountTimer)
      if (Number(workPace.value?.todayData.orderAmount) <= orderAmount.value) {
        clearInterval(Timer)
      }
    }
  }, 10)
  // 动态数字 订单数量
  var Timer1 = setInterval((): void => {
    // 订单数量
    orderNumber.value += 10
    if (Number(workPace.value?.todayData.orderNumber) - orderNumber.value <= 10) {
      orderNumber.value += (Number(workPace.value?.todayData.orderNumber) - orderNumber.value)
      // clearInterval(orderNumberTimer)
      if (Number(workPace.value?.todayData.orderNumber) <= orderNumber.value) {
        clearInterval(Timer1)
      }
    }
  }, 10)
  // 动态数字 运输任务
  var Timer2 = setInterval((): void => {
    // 订单数量
    transportTaskNumber.value += 2
    if (Number(workPace.value?.todayData.transportTaskNumber) - transportTaskNumber.value <= 2) {
      transportTaskNumber.value += (Number(workPace.value?.todayData.transportTaskNumber) - transportTaskNumber.value)
      // clearInterval(transportTaskNumberTimer)
      if (Number(workPace.value?.todayData.transportTaskNumber) <= transportTaskNumber.value) {
        clearInterval(Timer2)
      }
    }
  }, 10)
  // 动态数字 订单最高值
  var Timer3 = setInterval((): void => {
    // 订单数量
    orderMaxNumber.value += 2000
    if (Number(workPace.value?.orderLineChart.orderMaxNumber) - orderMaxNumber.value <= 2000) {
      orderMaxNumber.value += (Number(workPace.value?.orderLineChart.orderMaxNumber) - orderMaxNumber.value)
      // clearInterval(orderMaxNumberTimer)
      if (Number(workPace.value?.orderLineChart.orderMaxNumber) <= orderMaxNumber.value) {
        clearInterval(Timer3)
      }
    }
  }, 10)
  // 动态数字 订单平均值
  var Timer4 = setInterval((): void => {
    // 订单数量
    orderAverageNumber.value += 500
    if (Number(workPace.value?.orderLineChart.orderAverageNumber) - orderAverageNumber.value <= 500) {
      orderAverageNumber.value += (Number(workPace.value?.orderLineChart.orderAverageNumber) - orderAverageNumber.value)
      // clearInterval(orderAverageNumberTimer)
      if (Number(workPace.value?.orderLineChart.orderAverageNumber) <= orderAverageNumber.value) {
        clearInterval(Timer4)
      }
    }
  }, 10)
  // 动态数字 订单平均值
  var Timer5 = setInterval((): void => {
    // 订单数量
    orderMinNumber.value += 500
    if (Number(workPace.value?.orderLineChart.orderMinNumber) - orderMinNumber.value <= 500) {
      orderMinNumber.value += (Number(workPace.value?.orderLineChart.orderMinNumber) - orderMinNumber.value)
      // clearInterval(orderMinNumberTimer)
      if (Number(workPace.value?.orderLineChart.orderMinNumber) <= orderMinNumber.value) {
        clearInterval(Timer5)
      }
    }
  }, 10)
}
// 动态数字
getWorkPace()
</script>

<template>
  <div class="home" v-loading.fullscreen.lock="loading">
    <el-row class="box">
      <!-- 第一行 左边 -->
      <el-col class="left" :span="12" style="margin-right: 69px;">
        <el-card shadow="never">
          <h4>机构描述</h4>
          <div class="content-1">
            <div class="left-content-1">
              <p class="text">{{ workPace?.organOverview.organName }}</p>
              <p class="text text1">地址：{{ workPace?.organOverview.organAddress }}</p>
              <p class="text text1">负责人：{{ workPace?.organOverview.principal }} {{ workPace?.organOverview.phone }}</p>
              <el-button size="large" class="btn1">查看营业分布</el-button>
            </div>
            <div class="right-content-1">
              <div class="right-text">
                <div class="son">
                  <span>分拣中心(个)</span>
                  <span class="num">{{ workPace?.organOverview.sortingCenterNumber }}</span>
                </div>
                <div class="son">
                  <span>营业部(个)</span>
                  <span class="num">{{ workPace?.organOverview.agencyNumber }}</span>
                </div>
              </div>
              <div class="right-text">
                <div class="son">
                  <span>司机人数(个)</span>
                  <span class="num">{{ workPace?.organOverview.driverNumber }}</span>
                </div>
                <div class="son">
                  <span>快递员人数(个)</span>
                  <span class="num">{{ workPace?.organOverview.courierNumber }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 第一行右边 -->
      <el-col class="right" :span="11">
        <el-card shadow="never">
          <div class="top">
            <h4>今日数据</h4>
            <div class="time">
              <el-icon>
                <Refresh />
              </el-icon>
              <span>2023-03-06 10:21</span>
            </div>
          </div>
          <div class="data-content">
            <div class="data">
              <div class="title">订单金额(元)</div>
              <h1>{{ orderAmount }}</h1>
              <div class="compare">较昨日+{{ workPace?.todayData.orderAmountChanges }}
                <el-icon style="vertical-align: middle;font-size: 16px;color: #e35d3f;">
                  <Top />
                </el-icon>
              </div>
            </div>
            <div class="data">
              <div class="title">订单数量(笔)</div>
              <h1>{{ orderNumber }}</h1>
              <div class="compare">较昨日+{{ workPace?.todayData.orderNumberChanges }}
                <el-icon style="vertical-align: middle;font-size: 16px;color: #e35d3f;">
                  <Top />
                </el-icon>
              </div>
            </div>
            <div class="data">
              <div class="title">运输任务(次)</div>
              <h1>{{ transportTaskNumber }}</h1>
              <div class="compare">较昨日+{{ workPace?.todayData.transportTaskNumberChanges }}
                <el-icon style="vertical-align: middle;font-size: 16px;color: #e35d3f;">
                  <Top />
                </el-icon>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row class="box">
      <!-- 第二行左边 -->
      <el-col class="left" :span="12" style="margin-right: 69px;">
        <el-card shadow="never">
          <div class="top">
            <h4>今日数据</h4>
            <div class="time">
              <el-icon>
                <Refresh />
              </el-icon>
              <span>2023-03-06 10:21</span>
            </div>
          </div>
          <div class="data-q">
            <div class="box1">
              <liqiud :data="workPace?.backlog.waitingPickupRate" background-color="#e25d3e" shadow="#ffe5e0"></liqiud>
              <div class="text">待取件 <span style="color:#e25d3e">{{ workPace?.backlog.waitingPickupRate }}</span></div>
            </div>
            <div class="box1">
              <liqiud :data="workPace?.backlog.waitingDispatchRate" background-color="#ffc45e" shadow="#fff1d9"></liqiud>
              <div class="text">待派件 <span style="color:#ffc45e">{{ workPace?.backlog.waitingDispatchRate }}</span></div>
            </div>
            <div class="box1">
              <liqiud :data="workPace?.backlog.unassignedTransportTaskRate" background-color="#ff9b41" shadow="#ffead7">
              </liqiud>
              <div class="text">未分配运输 <span style="color: #ff9b41;">{{ workPace?.backlog.unassignedTransportTaskRate
              }}</span></div>
            </div>
            <div class="box1">
              <liqiud :data="workPace?.backlog.timeoutTransportTaskRate" background-color="#edde83" shadow="#fafade">
              </liqiud>
              <div class="text">超时运输 <span style="color: #edde83;">{{ workPace?.backlog.timeoutTransportTaskRate }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 第二行右边 -->
      <el-col class="right" :span="11">
        <el-card shadow="never">
          <div class="top">
            <div class="title-task">
              <h4>执行中任务</h4>
              <el-tooltip placement="bottom" effect="light">
                <template #content>
                  <span>
                    运输率=运输中/(全部订单-待取件-已取件-网点入库-待装车-已取消）<br />
                    派送率=派送中/(待派送+派送中+已签收+拒收）
                  </span>
                </template>
                <el-icon>
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
            <div class="time">
              <el-icon>
                <Refresh />
              </el-icon>
              <span>2023-03-06 10:21</span>
            </div>
          </div>
          <div class="data-q">
            <div class="box1">
              <liqiud :data="workPace?.todayData.taskInTransitRate" background-color="#f9785c" shadow="#ffe5e0"></liqiud>
              <div class="text">运输中 <span style="color: #f9785c">{{ workPace?.todayData.taskInTransitRate }}</span></div>
            </div>
            <div class="box1">
              <liqiud :data="workPace?.todayData.taskInDeliveryRate" background-color="#ffc45e" shadow="#fff1d9"></liqiud>
              <div class="text">派送中 <span style="color: #ffc45e">{{ workPace?.todayData.taskInDeliveryRate }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第三行 -->
    <el-row class="box" style="min-width: 1260px;">
      <el-col>
        <el-card shadow="never">
          <h4>常用功能</h4>
          <div class="always-box">
            <router-link to="/" class="box2">
              <img :src="kd" alt="" width="50" height="50">
              <div class="text">快递作业</div>
            </router-link>
            <router-link to="/" class="box2">
              <img :src="ys" alt="" width="50" height="50">
              <div class="text">运输任务</div>
            </router-link>
            <router-link to="/" class="box2">
              <img :src="lx" alt="" width="50" height="50">
              <div class="text">路线管理</div>
            </router-link>
            <router-link to="/" class="box2">
              <img :src="cl" alt="" width="50" height="50">
              <div class="text">车辆管理</div>
            </router-link>
            <router-link to="/" class="box2">
              <img :src="sj" alt="" width="50" height="50">
              <div class="text">司机管理</div>
            </router-link>
            <router-link to="/" class="box2">
              <img :src="yf" alt="" width="50" height="50">
              <div class="text">运费查询</div>
            </router-link>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第四行 -->
    <el-row class="box maps">
      <el-col class="left" style="margin-right: 69px;height: 500px;" :span="12">
        <el-card shadow="never">
          <maps style="width: 100%; height: 100%"></maps>
        </el-card>
      </el-col>
      <el-col class="right" :span="11">
        <el-card shadow="never">
          <table1 :data="workPace?.transportTaskList" style="width: 100%;height: 100%;"></table1>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第五行 -->
    <el-row class="box maps">
      <el-col class="left" style="margin-right: 69px;height: 500px;" :span="12">
        <el-card shadow="never">
          <div class="top">
            <div style="display: flex;flex-direction: column;">
              <h4 style="margin: 0; margin-bottom: 10px;">订单总量</h4>
              <span style="font-size: 12px;color: #bcbfc6;">单位/笔</span>
            </div>
            <div class="time">
              <span>2023-03-06 10:21</span>
            </div>
          </div>
          <div class="body">
            <div class="info">
              <div class="box">
                <span class="text">{{ orderMaxNumber }}</span>
                <span class="name">订单最高值</span>
              </div>
              <div class="box">
                <span class="text">{{ orderAverageNumber }}</span>
                <span class="name">订单平均值</span>
              </div>
              <div class="box">
                <span class="text">{{ orderMinNumber }}</span>
                <span class="name">订单最低值</span>
              </div>
            </div>
            <tu :list="workPace?.orderLineChart.monthlyOrderList as monthlyOrderList[]"></tu>
          </div>
        </el-card>
      </el-col>
      <el-col class="right" :span="11">
        <el-card shadow="never">
          <div class="top">
            <div style="display: flex;flex-direction: column;">
              <h4 style="margin: 0; margin-bottom: 10px;">订单分布</h4>
              <span style="font-size: 12px;color: #bcbfc6;">单位/笔</span>
            </div>
            <div class="time">
              <span>2023-03-06 10:21</span>
            </div>
          </div>
          <fenbu style="margin-top: 20px;"></fenbu>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.el-row {
  flex-wrap: nowrap;
  // display: inline-flex !important;
}

.home {

  ::v-deep .maps {
    height: 500px !important;

    .el-card {
      height: 500px !important;
    }

    .el-card__body {
      width: 100%;
      height: 500px;
      // padding: 0;
      box-sizing: border-box;
    }
  }

  .el-card {
    border: none;

    .body {
      .info {
        margin: 10px 0;
        display: flex;
        justify-content: space-around;

        .box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .text {
            font-size: 28px;
            color: #e15536;
            font-weight: 700;
            text-align: center;
            margin-bottom: 5px;
          }

          .name {
            font-size: 12px;
            color: #818693;
            text-align: center;
          }
        }
      }
    }

    .always-box {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .box2 {
        width: 245px;
        height: 116px;
        background-color: #fafafb;
        text-decoration: none;
        color: #20232a;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &:hover {
          color: #e15536;
          cursor: pointer;
        }
      }

      .text {
        font-weight: bold;
        margin-top: 5px;

        span {
          font-size: 14px;
        }
      }
    }
  }

  // padding: 20px 20px;
  .data-q {
    display: flex;
    justify-content: space-around;

    .box1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .text {
        font-weight: bold;

        span {
          font-size: 14px;
        }
      }
    }
  }

  .box {
    margin-bottom: 20px;
  }

  h4 {
    width: 150px;
    margin: 0;
    margin-bottom: 16px;
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title-task {
      display: flex;

      h4 {
        width: 80px;
      }

      .el-icon {
        margin-left: 8px;
        color: #bcbfc6;
        cursor: pointer;
      }
    }

    .time {
      font-size: 15px;
      color: #bcbfc6;

      .el-icon {
        font-size: 16px;
        margin-right: 5px;
        width: 15px;
        height: 14px;
        line-height: 14px;
        color: #e35d3f;
        vertical-align: middle;
        cursor: pointer;
      }
    }

    span {
      vertical-align: middle
    }
  }

  .left {
    min-width: 635px;
    height: 234px;
    box-sizing: border-box;

    .el-card {
      height: 100%;
      box-sizing: border-box;

      ::v-deep .content-1 {
        display: flex;
        justify-content: space-between;

        .left-content-1 {
          flex: 50%;
          border-right: 1px solid #ebeef5;

          .text {
            margin: 0;
            margin-bottom: 10px;

            &.text1 {
              font-size: 14px;
              color: #818693;
            }
          }

          .btn1 {
            font-size: 14px;
            color: #e15536;
            width: 158px;
            height: 40px;
            background: #ffeeeb;
            border: 1px solid #f3917c;
            border-radius: 4px;
            cursor: pointer;

            &:hover {
              background: #ff6b4a !important;
              border-color: transparent !important;
              color: #fff !important;
            }
          }
        }

        .right-content-1 {
          margin-top: -20px;
          padding-left: 50px;

          .right-text {
            display: flex;
            // justify-content: space-between;
            align-items: center;
            padding: 5px 0px;

            .son {
              display: flex;
              justify-content: center;
              flex-direction: column;
              align-items: center;
              padding-right: 50px;

              .num {
                font-size: 32px;
                font-weight: 700;
                color: #e15536;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }

  .right {
    min-width: 557px;
    height: 234px;



    .data-content {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .data {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        h1 {
          font-size: 36px;
          color: #20232a;
          font-weight: 700;
          margin: 0;
          margin-bottom: 24px;
        }

        .compare {
          font-size: 14px;
          color: #818693;
          margin-bottom: 20px;
        }
      }
    }

    .el-card {
      height: 100%;
      border: none;
      box-sizing: border-box;
    }
  }
}
</style>